<template>
  <div class="allgoods">
      <header>
        <van-icon name="arrow-left" class="scan" size=".48rem" @click="goBack"/>
        <form action="/" class="search">
          <van-search placeholder="请输入搜索关键词" v-model="searchValue" shape="round" class="search" @keypress="searchKeyWord"/>
        </form>
        <div class="code" @click="searchProduct">搜索</div>
      </header>
      <notice></notice>
      <div class="screen">
        <div class="condition" @click="defaultCondition" :style="{color: sales === '' && price === '' ? '#E0261B' : '#666666'}">综合</div>
        <div class="condition" @click="changeCondition('sales', 'price')">
          <span :style="{color: sales !== '' ? '#E0261B' : '#666666'}">销量</span>
          <img :src="$img(sales === '' ? 'no_condition.png' : sales === 'desc' ? 'down_condition.png' : 'up_condition.png')">
        </div>
        <div class="condition" @click="changeCondition('price', 'sales')">
          <span :style="{color: price !== '' ? '#E0261B' : '#666666'}">价格</span>
          <img :src="$img(price === '' ? 'no_condition.png' : price === 'desc' ? 'down_condition.png' : 'up_condition.png')">
        </div>
        <div class="condition more_condition" @click="defaultCondition">
          <span>重置</span>
          <van-icon name="wap-nav" size=".4rem"/>
        </div>
      </div>
      <div class="goodlist">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
          :offset="100"
          class="loadmore"
        >
          <div class="left">
            <div class="item" v-for="(item, index) in leftList" :key="index" @click="toDetail(item.id)">
              <van-image :src="item.image" class="product_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error></template>
              </van-image>
              <p class="van-multi-ellipsis--l2 item_title">{{item.store_name}}</p>
              <div class="price">
                <span>￥{{item.price}}</span>
                <span>已售{{item.sales}}</span>
              </div>
              <div class="goods_tag" v-if="item.is_good || item.is_new">
                <van-tag v-if="item.is_good" plain color="#FE0000" size="medium">新品</van-tag>
                <van-tag v-if="item.is_new" plain color="#FE0000" size="medium">推荐</van-tag>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="item" v-for="(item, index) in rightList" :key="index" @click="toDetail(item.id)">
              <van-image :src="item.image" class="product_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error></template>
              </van-image>
              <p class="van-multi-ellipsis--l2 item_title">{{item.store_name}}</p>
              <div class="price">
                <span>￥{{item.price}}</span>
                <span>已售{{item.sales}}</span>
              </div>
              <div class="goods_tag" v-if="item.is_good || item.is_new">
                <van-tag v-if="item.is_good" plain color="#FE0000" size="medium">新品</van-tag>
                <van-tag v-if="item.is_new" plain color="#FE0000" size="medium">推荐</van-tag>
              </div>
            </div>
          </div>
        </van-list>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchValue: '',
      loading: false,
      finished: false,
      page: 0,
      last_page: 100,
      leftList: [],
      rightList: [],
      sales: '',
      price: '',
      category_id: ''
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        if (this.page >= this.last_page) {
          this.finished = true
          return
        }
        this.page++
        this.loading = false
        this.$axios.get('/api/product_list', {
          params: {
            page: this.page,
            num: 10,
            keyword: this.searchValue,
            price: '',
            sales: '',
            category_id: this.category_id
          }
        }).then(res => {
          if (res.status === 200) {
            this.last_page = res.data.last_page
            for (let i in res.data.data) {
              i % 2 === 0 ? this.leftList.push(res.data.data[i]) : this.rightList.push(res.data.data[i])
            }
            this.loading = false
            this.finished = true
          }
        })
      }, 1000)
    },
    searchKeyWord (event) {
      if (event.keyCode === 13) {
        event.preventDefault()
        this.searchProduct()
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    getProductList () {
      this.$axios.get('/api/product_list', {
        params: {
          page: this.page,
          num: 10,
          keyword: this.searchValue,
          price: this.price,
          sales: this.sales,
          category_id: this.category_id
        }
      }).then(res => {
        this.last_page = res.data.last_page
        for (let i in res.data.data) {
          i % 2 === 0 ? this.leftList.push(res.data.data[i]) : this.rightList.push(res.data.data[i])
        }
      })
    },
    changeCondition (type, other) {
      this.finished = false
      this.loading = false
      this.page = 1
      if (this[type] === '') {
        this[type] = 'desc'
        this[other] = ''
      } else if (this[type] === 'desc') {
        this[type] = 'asc'
        this[other] = ''
      } else if (this[type] === 'asc') {
        this[type] = 'desc'
        this[other] = ''
      }
      this.leftList = []
      this.rightList = []
      this.getProductList()
    },
    defaultCondition (last) {
      this.sales = ''
      this.price = ''
      this.leftList = []
      this.rightList = []
      this.page = 1
      if (last) {
        this.searchValue = ''
      }
      this.getProductList()
    },
    searchProduct () {
      this.category_id = ''
      this.sales = ''
      this.price = ''
      this.leftList = []
      this.rightList = []
      this.page = 1
      this.getProductList()
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    }
  },
  created () {
    if (this.$route.params.id) {
      this.category_id = this.$route.params.id
    }
    if (this.$route.params.key) {
      this.searchValue = this.$route.params.key
    }
    this.getProductList()
  }
}
</script>

<style lang="scss">
.allgoods{
  background: #f6f6f6;
  height: 100%;
  header{
    padding: .14rem .32rem;
    font-size: .24rem;
    color: #666666;
    background: #E0261B;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .scan{
      width: .44rem;
      height: .44rem;
      color: #ffffff;
    }
    .code{
      font-size: .28rem;
      color: #ffffff;
    }
    .search{
      width: 5.36rem;
      height: .6rem;
      padding: 0;
      background: #E0261B !important;
      &>*{
        // background: #ffffff;
        width: 100%;
        border-radius: .36rem;
        height: .6rem;
      }
    }
    .van-cell__value--alone{
      display: flex;
    }
    .van-field__body{
      width: 100%;
    }
  }
  .screen{
    display: flex;
    padding: .3rem .24rem .3rem .48rem;
    justify-content: space-between;
    background: #f6f6f6;
    .condition{
      color: #666666;
      font-size: .24rem;
      display: flex;
      align-items: center;
      position: relative;
      img{
        width: .26rem;
        height: .26rem;
      }
    }
    .more_condition::after{
      content: '';
      position: absolute;
      left: -.32rem;
      width: .02rem;
      height: 100%;
      background: #cccccc;
      height: .32rem;
    }
  }
  .goodlist{
    padding: 0 .16rem;
    height: calc(100% - .88rem - .48rem - 1.08rem);
    background: #f6f6f6;
    overflow: auto;
    .loadmore{
      width: 100%;
      .left, .right{
        display: inline-block;
      }
      .right{
        margin-left: .14rem;
        vertical-align: top;
      }
    }
  }
  .item{
    width: 3.52rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: .16rem;
    overflow: hidden;
    margin-bottom: .16rem;
    .product_img{
      width: 3.52rem;
      height: 3.52rem;
      border-radius: .16rem .16rem 0 0;
    }
    .item_title{
      color: #000000;
      font-size: .24rem;
      padding: 0 .16rem;
      margin-top: .12rem;
      margin-bottom: .16rem;
    }
    .price{
      padding: 0 .16rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: .12rem;
      span:first-child{
        color: #fe0000;
        font-size: .28rem;
        font-weight: 700;
      }
      span:last-child{
        font-size: .24rem;
        color: #999999;
      }
    }
    .goods_tag{
      padding: 0 .2rem .24rem;
      display: flex;
      span{
        margin-right: .08rem;
      }
    }
  }
}
</style>
